<template>
  <view class="classlist">
    <!-- 刚进页面，数组为空，取反为true -->
    <!-- 如果进入了错误的页面，空页面，就不要显示加载中了，也就是res.data为空的情况，此时noMoreData为true -->
    <view class="loadingLayout" v-if="!classList.length && !noMoreData">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    <view class="content">
      <!-- 跳转到大图 -->
      <navigator
        :url="'/pages/preview/preview?id=' + item._id"
        class="item"
        v-for="item in classList"
        :key="item._id"
      >
        <image :src="item.smallPicurl" mode="aspectFill"></image>
      </navigator>
    </view>

    <view class="loadingLayout" v-if="classList.length || noMoreData">
      <uni-load-more :status="noMoreData ? 'noMore' : 'loading'"></uni-load-more>
    </view>

    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onUnload, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { apiGetClassList, apiGetHistoryList } from '@/api/apis.js';
import { gotoHome } from '@/utils/common.js';

const classList = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
});
let pagename = '';

// 用于表示后面还能不能加载出来东西，默认是false，于是能跳过onReachBottom()的第一行判断,往下执行触底获取的操作，直到每页最大容量值大于最后一次获取数量值的时候，noMoreData变为true，意思是“无数据”为“是”
const noMoreData = ref(false);

// 从theme-item跳转过来,并且他给我们附带了一些值,
// 这些都能用onLoad收到,我们就解构就行了
onLoad((e) => {
  const { id = null, name = null, type = null } = e;
  if (type) queryParams.value.type = type; // 如此一来就收到了参数
  if (id) queryParams.value.classid = id;

  pagename = name;
  uni.setNavigationBarTitle({
    title: name,
  });
  getClassList();
});

onReachBottom(() => {
  if (noMoreData.value) return;
  queryParams.value.pageNum++;
  getClassList();
});

// 获取分类列表网络数据
const getClassList = async () => {
  let res;
  try {
    if (queryParams.value.classid) {
      res = await apiGetClassList(queryParams.value);
    } else if (queryParams.value.type) {
      res = await apiGetHistoryList(queryParams.value);
    } else {
      console.error('Invalid query parameters');
      return;
    }

    if (res.data && res.data.length) {
      classList.value = [...classList.value, ...res.data];
      if (queryParams.value.pageSize > res.data.length) {
        noMoreData.value = true;
      }
    } else {
      noMoreData.value = true;
    }

    uni.setStorageSync('storageClassList', classList.value);
    console.log(res);
  } catch (error) {
    console.error('Error fetching class list:', error);
  }
};

// 分享给好友
onShareAppMessage(() => {
  return {
    title: '@@@@',
    path: `/pages/classlist/classlist?id=${queryParams.value.classid}&name=${pagename}`,
  };
});

// 分享朋友圈
onShareTimeline(() => {
  return {
    title: `虾米壁纸-${pagename}`,
    query: `id=${queryParams.value.classid}&name=${pagename}`,
  };
});

onUnload(() => {
  uni.removeStorageSync('storageClassList');
});
</script>

<style lang="scss" scoped>
.classlist {
  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item {
      height: 440rpx;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>